<template>
  <div class="bg-light">
      <div class="container-title">基础设置</div>
      <Form :label-width="100" :rules="rule" ref="form" :model="form">
        <Row class="pr">
          <Col span="8">
            <FormItem label="促销名称" prop="name">
              <Input placeholder="请输入促销名称" v-model="form.name" :maxlength="20"/>
            </FormItem>
          </Col>
        </Row>
        <Row class="pr">
          <Col span="8">
            <FormItem label="活动时间" prop="date">
              <DatePicker 
                type="daterange" 
                placement="bottom-end" 
                v-model="form.date" 
                placeholder="请选择活动时间">
              </DatePicker>
            </FormItem>
          </Col>
        </Row>
        <Row class="pr">
          <Col span="8">
            <FormItem label="限制数量" prop="num">
              <RadioGroup v-model="form.num">
                <Radio label="1">部分商品参加</Radio>
                <Radio label="2">全部商品参加</Radio>
              </RadioGroup>
            </FormItem>
          </Col>
        </Row>
        <Row class="pr">
          <Col span="8">
            <FormItem label="活动对象" prop="grade">
              <CheckboxGroup v-model="form.grade">
                  <Checkbox :label="item.id" v-for="item in gradeList" :key="item.id">{{item.name}}</Checkbox>
              </CheckboxGroup>
            </FormItem>
          </Col>
        </Row>
        <Row class="pr">
          <Col span="8">
                <FormItem label="促销类型">
                  <Select>
                    <Option 
                      v-for="item in promotionType" 
                      :key="item.value" 
                      :value="item.value">
                      {{item.label}}
                    </Option>
                  </Select>
                </FormItem>
          </Col>
        </Row>
        <Row class="pr">
                <Col span="8">
                        <FormItem label="活动规则" >
                            :满   <Input style="width:60px" placeholder=""/>  元
                            减   <Input style="width:60px" placeholder=""/>  元
                        </FormItem>     
                </Col>
            </Row>
            <Row class="pr">
                <Col span="8">
                    <FormItem label="参与方式" prop="gender">
                        <RadioGroup v-model="form.gender" >
                            <Radio label="0">全场商品参加</Radio>
                            <Radio label="1">部分商品参加</Radio>
                            <Radio label="2">部分商品不参加</Radio>
                        </RadioGroup>
                    </FormItem>
                </Col>
            </Row>
        <Row class="pr">
          <Col span="8">
            <FormItem label="活动备注">
              <Input placeholder="活动备注" v-model="form.remarks" :maxlength="20"/>
            </FormItem>
          </Col>
        </Row>
      </Form>
    </div>
</template>
<script>
export default {
  props: {
    form: {
      type: Object
    }
  },
  data() {
    return {
      promotionType: [
        {
          value: 1,
          label: "满赠促销"
        },
        {
          value: 2,
          label: "加价购促销"
        }
      ],
      gradeList: [
        {
          id: 1,
          name: "普通会员"
        },
        {
          id: 2,
          name: "VIP"
        },
        {
          id: 3,
          name: "黄金VIP"
        }
      ],
      termList: [
        {
          id: 1,
          name: "限IP/UDID"
        },
        {
          id: 2,
          name: "限帐号"
        }
      ],
      rule: {
        name: [{ required: true, message: "请输入促销名称", trigger: "blur" }],
        date: [{ required: true, message: "请开始时间", trigger: "blur" }],
        grade: [{ required: true, message: "请选择活动对象", trigger: "blur" }],
        term: [{ required: true, message: "请选择限购条件", trigger: "blur" }],
        num: [{ required: true, message: "请选择限购数量", trigger: "blur" }]
      }
    };
  }
};
</script>
